@import './variables.styl'

.padding-10
  padding: 10px


$red-color = #f87171
$green-color = #4ade80
.text {
  font-size: 14px
}


// 使用变量
.text-primary
  color: $primary-color

// 嵌套选择器
.list
  @extend .padding-10
  border: $border-width solid $red-color
  .item
    display: flex
    justify-content: space-between
    align-items: center
    flex-direction: row
    padding: 5px 10px
    background-color: #3498db
    // 状态选择器
    &.active
      background-color: #0983d5
    .text
      color: $white-color

// 使用混合器
borderRadius()
  border-radius arguments

.border-radius-4
  borderRadius: 4px

.border-radius-10
  borderRadius: 10px

// 使用 extends
.message
  @extend .padding-10
  @extend .border-radius-4
  border: $border-width solid #ccc
  font-weight: 600;

.success-message
  @extend .message
  border-color: $green-color
  color: $green-color

.error-message
  @extend .message
  border-color: $red-color
  color: $red-color

// 条件语句
$debug-mode: true

.debug
  if $debug-mode
  // 调试样式
    @extend .padding-10
    @extend .border-radius-4
    border: $border-width solid $red-color
  else
  // 生产样式
    display: none

// 循环
for index in (1..5)
  .item-{index}
    @extend .border-radius-4
    width: 60px * index
    height: 30px
    padding-left: 5px
    background-color: $primary-color
    .text
      line-height: 30px
      color: $white-color
